<!-- <script setup>

</script>

<template>
system
</template>

<style scoped>

</style> -->
<template>
    <div class="system-settings">
      <!-- 标题 -->
      <div class="header">
        <h2>系统设置</h2>
        <el-button 
          type="primary" 
          :loading="saving"
          @click="saveAllSettings"
        >
          保存所有设置
        </el-button>
      </div>
  
      <!-- 设置主内容 -->
      <el-scrollbar class="settings-container">
        <!-- 基本设置 -->
        <el-card class="setting-group">
          <template #header>
            <div class="group-header">
              <el-icon><Setting /></el-icon>
              <span>基本设置</span>
            </div>
          </template>
          
          <el-form :model="settings.basic" label-width="120px">
            <el-form-item label="系统名称" prop="systemName">
              <el-input 
                v-model="settings.basic.systemName" 
                placeholder="请输入系统名称"
              />
            </el-form-item>
            
            <el-form-item label="系统Logo">
              <el-upload
                class="logo-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeLogoUpload"
              >
                <img v-if="settings.basic.logo" :src="settings.basic.logo" class="logo">
                <el-icon v-else class="uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            
            <el-form-item label="时区设置">
              <el-select 
                v-model="settings.basic.timezone" 
                placeholder="请选择时区"
              >
                <el-option
                  v-for="tz in timezones"
                  :key="tz.value"
                  :label="tz.label"
                  :value="tz.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
  
        <!-- 安全设置 -->
        <el-card class="setting-group">
          <template #header>
            <div class="group-header">
              <el-icon><Lock /></el-icon>
              <span>安全设置</span>
            </div>
          </template>
  
          <el-form :model="settings.security" label-width="120px">
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="settings.security.passwordRules">
                <el-checkbox label="requireNumber">必须包含数字</el-checkbox>
                <el-checkbox label="requireUppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="requireSpecialChar">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="密码有效期">
              <el-input-number 
                v-model="settings.security.passwordExpireDays" 
                :min="30" 
                :max="365"
              />
              <span class="unit">天</span>
            </el-form-item>
            
            <el-form-item label="登录失败锁定">
              <el-input-number 
                v-model="settings.security.maxLoginAttempts" 
                :min="1" 
                :max="10"
              />
              <span class="unit">次后锁定账户</span>
            </el-form-item>
          </el-form>
        </el-card>
  
        <!-- 通知设置 -->
        <el-card class="setting-group">
          <template #header>
            <div class="group-header">
              <el-icon><Bell /></el-icon>
              <span>通知设置</span>
            </div>
          </template>
  
          <el-form :model="settings.notification" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch v-model="settings.notification.emailEnabled" />
            </el-form-item>
            
            <el-form-item label="SMTP服务器">
              <el-input 
                v-model="settings.notification.smtpHost" 
                :disabled="!settings.notification.emailEnabled"
              />
            </el-form-item>
            
            <el-form-item label="短信通知">
              <el-switch v-model="settings.notification.smsEnabled" />
            </el-form-item>
          </el-form>
        </el-card>
  
        <!-- 高级设置 -->
        <el-card class="setting-group">
          <template #header>
            <div class="group-header">
              <el-icon><MagicStick /></el-icon>
              <span>高级设置</span>
            </div>
          </template>
  
          <el-form :model="settings.advanced" label-width="120px">
            <el-form-item label="数据备份">
              <el-select v-model="settings.advanced.backupFrequency">
                <el-option label="每天" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="日志保留">
              <el-input-number 
                v-model="settings.advanced.logRetentionDays" 
                :min="7" 
                :max="365"
              />
              <span class="unit">天</span>
            </el-form-item>
            
            <el-form-item label="API速率限制">
              <el-input-number 
                v-model="settings.advanced.apiRateLimit" 
                :min="10" 
                :max="1000"
              />
              <span class="unit">次/分钟</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-scrollbar>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Setting, Lock, Bell, MagicStick, Plus } from '@element-plus/icons-vue'
  
  // 模拟数据
  const settings = reactive({
    basic: {
      systemName: '管理系统',
      logo: '',
      timezone: 'Asia/Shanghai'
    },
    security: {
      passwordRules: ['requireNumber', 'requireUppercase'],
      passwordExpireDays: 90,
      maxLoginAttempts: 5
    },
    notification: {
      emailEnabled: true,
      smtpHost: 'smtp.example.com',
      smsEnabled: false
    },
    advanced: {
      backupFrequency: 'daily',
      logRetentionDays: 30,
      apiRateLimit: 100
    }
  })
  
  const timezones = ref([
    { label: '中国标准时间 (UTC+8)', value: 'Asia/Shanghai' },
    { label: '格林尼治时间 (UTC+0)', value: 'UTC' },
    { label: '太平洋时间 (UTC-8)', value: 'America/Los_Angeles' }
  ])
  
  const saving = ref(false)
  
  // 保存所有设置
  const saveAllSettings = async () => {
    saving.value = true
    try {
      // 这里模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000))
      ElMessage.success('设置保存成功')
    } catch (error) {
      ElMessage.error('保存失败，请重试')
    } finally {
      saving.value = false
    }
  }
  
  // 图片上传处理
  const beforeLogoUpload = (file) => {
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
      ElMessage.error('只能上传图片文件')
      return false
    }
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      settings.basic.logo = reader.result
    }
    return false // 阻止默认上传
  }
  </script>
  
  <style scoped>
  .system-settings {
    padding: 20px;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .settings-container {
    flex: 1;
    padding-right: 10px;
  }
  
  .setting-group {
    margin-bottom: 20px;
  }
  
  .group-header {
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 8px;
      font-size: 18px;
    }
  }
  
  .logo-uploader {
    :deep(.el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      width: 120px;
      height: 120px;
      
      &:hover {
        border-color: var(--el-color-primary);
      }
    }
  }
  
  .logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .unit {
    margin-left: 8px;
    color: var(--el-text-color-secondary);
  }
  
  .el-form-item {
    max-width: 600px;
  }
  </style>